
<template>
  <div class="app-container">
    <Row>
      <Col span="4" style="background-color:white;">
        <Tree :data="categoryData" expand="true" default-expand-all="true" @on-select-change="refreshTask" />
      </Col>
      <Col span="20" style="background-color:white;">
        <Card dis-hover class="task-card">
          <div class="app-container" style="background-color:white;">
            <el-row type="flex" justify="start">
              <el-form :inline="true" :model="queryForm" class="demo-form-inline" size="mini">

                <el-form-item label="对象名">
                  <el-input v-model="queryForm.objKey" clearable />
                </el-form-item>
                <el-form-item label="名称">
                  <el-input v-model="queryForm.objName" clearable />
                </el-form-item>
                <el-form-item label="描述">
                  <el-input v-model="queryForm.objDesc" clearable />
                </el-form-item>
                <el-form-item style="margin-left: 26px">
                  <el-button type="primary" @click="search">查询</el-button>
                  <el-button type="default" @click="reset">重置</el-button>
                </el-form-item>
              </el-form>
            </el-row>

            <el-button type="primary" size="mini" @click="add('inner')">新增</el-button>
            <el-row style="margin-top: 10px">
              <el-col>
                <el-table
                  :data="tableData"
                  size="mini"
                  style="width: 100%"
                  :height="tableHeight"
                  border
                >
                  <el-table-column
                    fixed
                    prop="objKey"
                    label="对象名"
                    width="180"
                    show-overflow-tooltip
                  />
                  <el-table-column
                    prop="objName"
                    label="名称"
                    width="180"
                    show-overflow-tooltip
                  />
                  <el-table-column
                    prop="objDesc"
                    label="描述"
                    width="300"
                    show-overflow-tooltip
                  />

                  <el-table-column
                    fixed="right"
                    label="操作"
                  >
                    <template slot-scope="scope">

                      <el-button size="mini" type="text" icon="el-icon-edit" @click="handleClick(scope.row)" />
                      <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelClick(scope.row)" />
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
            <el-row type="flex" justify="center">
              <el-pagination
                background
                :current-page="queryForm.page"
                :page-size="queryForm.pageSize"
                layout="total, prev, pager, next, jumper"
                :total="total"
                @current-change="handleCurrentChange"
              />
            </el-row>
          </div>
        </Card>

        <Modal
          v-model="busObj"
          title="Title"
          :transfer="false"
          :mask-closable="false"
        />
      </Col>

    </Row>

  </div>

</template>

<script>
// eslint-disable-next-line no-unused-vars
import { getTaskData, getTaskChartData, getBpmnModelCategory } from '@/api/analy'
import { getTypesByKey, businessObjectList, businessObjectGetStruct, businessObjectDel } from '@/api/form'

export default {
  name: 'Task',
  components: {

  },

  data() {
    return {
      cmOptions: {
        value: '',
        mode: 'application/json',
        theme: 'ambiance',
        readOnly: true
      },
      busObj: false,
      busStruct: '',
      tableData: [],
      tableHeight: 450,
      queryDate: [],
      total: 0,
      chartVisible: false,
      chartData: {},
      sellerId: 0,
      shopName: [],
      queryForm: {
        groupId: '',
        objName: '',
        objDesc: '',
        objKey: '',
        page: 0,
        limit: 10
      },
      categoryData: [
      ]
    }
  },
  mount() {
    this.getData()
    this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop
  },
  created() {
    this.initData()
  },
  methods: {
    getStruct: function(data) {
      this.busObj = true
      businessObjectGetStruct(data.id).then((response) => {
        this.busStruct = response.data
      })
    },
    add: function(type) {
      this.$router.push({ name: 'businessObjAdd', query: { t: new Date().getTime(), 'operate': 'inner' }})
    },
    queryFormCreateTime: function(e) {
      this.queryForm.createTime = e
    },
    refreshTask: function(data) {
      if (data[0].parentId === '-1') {
        this.queryForm.groupId = ''
      } else {
        this.queryForm.groupId = data[0].id
      }
      this.getData()
    },
    queryMethod: function() {
      this.getData()
    },
    getTypesByKeyAction: function() {
      getTypesByKey().then((response) => {
        this.categoryData = response.data
      })
    },
    initData: function() {
      this.getTypesByKeyAction()
      this.getData()
    },
    getData: function() {
      businessObjectList(this.queryForm).then((response) => {
        this.tableData = response.data
        this.total = parseInt(response.count)
      })
    },
    handleCurrentChange(val) {
      this.queryForm.page = val
      this.getData()
    },
    handleClick(data) {
      this.$router.push({ name: 'businessObjAdd', query: { t: new Date().getTime(), 'id': data.id, 'operate': data.type, 'edit': true }})
    },
    handleDelClick(data) {
      businessObjectDel(data.id).then((response) => {
        if (response.code === 0) {
          this.$message({ 'duration': 800, message: '操作成功', type: 'warning', customClass: 'zZindex' })

          this.getData()
        } else {
          this.$message({ 'duration': 800, message: response.msg, type: 'warning', customClass: 'zZindex' })
        }
      })
    },
    search() {
      this.queryForm.page = 0
      this.queryMethod()
    },
    reset() {
      this.queryForm.name = ''
      this.queryForm.createTime = ''
      this.queryForm.whereSql = ''
      this.queryForm.objName = ''
      this.queryForm.objDesc = ''
      this.queryForm.objKey = ''
      this.queryDate = []
      this.getData()
    }

  }

}

</script>
<style lang="scss">
.task-card{
  margin-top: 10px;
}

</style>
